<template>
	<view>
		<uni-section title="用户信息" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="UserIngfo">
					<uni-forms-item label="姓名:" label-align="center">
						<uni-easyinput v-model="UserIngfo.username" placeholder="请输入姓名" :disabled="disabledCheck" />
					</uni-forms-item>
					<uni-forms-item label="昵称:" label-align="center">
						<uni-easyinput v-model="UserIngfo.nickname" :disabled="disabledCheck" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别:" label-align="center">
						<uni-data-checkbox v-model="UserIngfo.gender" :disabled="disabledCheck" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item label="手机号:" label-align="center">
						<uni-easyinput v-model="UserIngfo.phone" :disabled="disabledCheck" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="生日:" label-align="center">
						<uni-datetime-picker type="datetime" :disabled="disabledCheck" return-type="timestamp"
							v-model="birthday" />
					</uni-forms-item>
					<!-- 	<uni-forms-item label="职位:" label-align="center">
						<uni-easyinput v-model="UserIngfo.job" :disabled="disabledCheck" placeholder="请输入职位" />
					</uni-forms-item> -->
					<!-- <uni-forms-item label="头像:" label-align="center">
						<view class="example-body custom-image-box">
							<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
								@success="successImgae" :value="compressStart" :auto-upload="false" @fail="failImage"
								@delete="delImage" mode="grid" file-extname="png,jpg" file-mediatype="image"
								@select="handleSelect"
								:disabled="disabledCheck">点击上传</uni-file-picker>
						</view>
					</uni-forms-item> -->
				</uni-forms>
				<!-- #ifdef APP-PLUS || H5 -->
				<button type="primary" @click="submit()">{{text}}</button>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-UNION || QUICKAPP-WEBVIEW-HUAWEI -->
				<button type="warn" @click="submit()">{{text}}</button>
				<!-- #endif -->

			</view>
		</uni-section>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="提示" content="修改后需要重新登录哦!"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				UserIngfo: {},
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}, {
					text: '保密',
					value: 3
				}],
				birthday: '',
				imageStyles: {
					width: 80,
					height: 80,
					border: {
						radius: '50%'
					}
				},
				disabledCheck: true,
				text: "修改信息",
				compressStart: []
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$api.user.getUserInfo().then(res => {
					if (res.code == 200) {
						this.UserIngfo = res.data
						if (res.data.birthday != "") {
							let time = Date.parse(new Date(res.data.birthday));;
							this.birthday = time
						}
					}
				})
			},
			submit() {
				this.disabledCheck = false
				this.text = this.text == "修改信息" ? "确定" : "修改信息"
				if (this.text == "修改信息") {
					if (this.UserIngfo.username == "") {
						uni.showToast({
							title: "姓名不能空",
							icon: "none"
						})
					} else if (this.UserIngfo.nickname == "") {
						uni.showToast({
							title: "昵称不能空",
							icon: "none"
						})
					} else {
						let time = this.timestampTime(this.birthday)
						let now = new Date(time)
						this.UserIngfo.birthday = now
						this.disabledCheck = true

						// #ifdef APP-PLUS || H5
						this.$refs.alertDialog.open()
						// #endif

						// #ifdef MP-WEIXIN || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-UNION || QUICKAPP-WEBVIEW-HUAWEI
						uni.showModal({
							title: "确定修改吗？",
							success: (res) => {
								if (res.confirm) {
									let params = {
										birthday: this.UserIngfo.birthday,
										gender: this.UserIngfo.gender,
										id: this.UserIngfo.id,
										mobile: this.UserIngfo.phone,
										nickname: this.UserIngfo.nickname,
										password: this.UserIngfo.password,
										username: this.UserIngfo.username,
									};
									this.$api.user.updateUser(params).then(res => {
										if (res.code == 200) {
											this.$store.commit("LOGOUT")
										}
									})
									uni.navigateTo({
										url: "/pages/view/Login"
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
						// #endif

					}
				}
			},
			timestampTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			dialogConfirm() {
				let params = {
					birthday: this.UserIngfo.birthday,
					gender: this.UserIngfo.gender,
					id: this.UserIngfo.id,
					mobile: this.UserIngfo.phone,
					nickname: this.UserIngfo.nickname,
					password: this.UserIngfo.password,
					username: this.UserIngfo.username,
				};
				this.$api.user.updateUser(params).then(res => {
					if (res.code == 200) {
						this.$store.commit("LOGOUT")
					}
				})
				uni.navigateTo({
					url: "/pages/view/Login"
				})
			},
			dialogClose() {
				this.getUserInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
